import React, { PropTypes } from 'react'
import { is, fromJS } from 'immutable'

/*
 图片处理方式枚举
 * */
export const EmImgProcessType = {
  emGD_NONE:0,
  emGD_H_W:1,
  emGD_W_H:2,
  emGD_HW_L:3,
  emGD_HW_S:4,
  emGD_L_S:5,
  emGD_S_S:6
}

class ImageItem extends React.Component {
  render() {
    let { linkUrl } = this.props
    let factImageUrl = this.computeUrl()
    let style = {
      fontSize: 0,
    }
    if (linkUrl && linkUrl.length > 0) {
      return (
        <a href={linkUrl} style={style} target='blank_' >
          <img src={factImageUrl} alt='' />
        </a>
      )
    }

    return (
      <img src={factImageUrl} alt='' />
    )
  }

  computeUrl() {
    let { imageUrl, width, height, quality, processType, aspectRatio, water } = this.props

    let factImageUrl = ''
    // 图片处理参数
    let imageOption = '';
    if (imageUrl === '') {
      return factImageUrl
    }

    // 获取文件后缀名,图片服务只针对jpg类型才有效
    let fileExtend = imageUrl.substring(imageUrl.lastIndexOf('.')).toLowerCase();
    if (fileExtend === '.jpg' || fileExtend === '.jpeg') {
      // 根据比例计算
      let factors = aspectRatio.split(':')
      if (factors[0] === '-1' || factors[1] === '-1') {
        width = '100%';
        height = '100%';
      } else {
        if (width) {
          height = parseInt(width * (parseFloat(factors[1]) / parseFloat(factors[0])), 10)
        } else if (height) {
          width = parseInt(height * (parseFloat(factors[0]) / parseFloat(factors[1])), 10)
        } else {
          console.log('高度或者宽度必须指定一个啊.');
          return factImageUrl;
        }
      }

      switch (processType) {
        case EmImgProcessType.emGD_NONE: {
          // 不做限定,自由显示
          break;
        }
        case EmImgProcessType.emGD_H_W: {
          // 固定高度，宽度自适应
          if (height !== '100%') {
            imageOption = `@0o_0l_${height}h_${quality}q.src`
          } else {
            imageOption = `@${quality}q.src`
          }
          break;
        }
        case EmImgProcessType.emGD_W_H: {
          // 固定宽度，高度自适应
          if (width !== '100%') {
            imageOption = `@0o_0l_${width}w_${quality}q.src`
          } else {
            imageOption = `@${quality}q.src`
          }
          break;
        }
        case EmImgProcessType.emGD_HW_L: {
          // 限定宽高，按长边缩放 0e_0o_0l_200h_200w_90q.src
          if (height !== '100%' && width !== '100%') {
            imageOption = `@0e_0o_0l__${height}h_${width}w_${quality}q.src`
          } else {
            imageOption = `@${quality}q.src`
          }
          break;
        }
        case EmImgProcessType.emGD_HW_S: {
          // 限定宽高，按短边缩放 1e_0o_0l_200h_200w_90q.src
          if (height !== '100%' && width !== '100%') {
            imageOption = `@1e_0o_0l_${height}h_${width}w_${quality}q.src`
          } else {
            imageOption = `@${quality}q.src`
          }
          break;
        }
        case EmImgProcessType.emGD_L_S: {
          // 按长边缩放，缩略填充 4e_0o_0l_200h_200w_90q.src
          if (height !== '100%' && width !== '100%') {
            imageOption = `@4e_0o_0l_${height}h_${width}w_${quality}q.src`
          } else {
            imageOption = `@${quality}q.src`
          }
          break;
        }
        case EmImgProcessType.emGD_S_S: {
          // 按短边缩放，居中裁剪 1e_1c_0o_0l_200h_200w_90q.src
          if (height !== '100%' && width !== '100%') {
            imageOption = `@1e_1c_0o_0l_${height}h_${width}w_${quality}q.src`
          } else {
            imageOption = `@${quality}q.src`
          }
          break;
        }
        default: {
          imageOption = `@${quality}q.src`
          break;
        }
      }

      if (water) {
        imageOption += '|watermark=1&object=c2h1aXlpbi5wbmc&t=80&p=5&y=10&x=10'
      }
    }

    factImageUrl = imageUrl + imageOption;

    return factImageUrl
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
  }
}

/*
 coverImgUrl   : 封面图片地址
 videoUrl      : 视频地址
 aspectRatio   : 视频的宽:高比例
 width         : 视频容器的宽度
 height        : 视频容器的高度
 * */
ImageItem.propTypes = {
  imageUrl: PropTypes.string.isRequired,
  linkUrl: PropTypes.string,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  quality: PropTypes.number,
  processType: PropTypes.number,
  aspectRatio: PropTypes.string.isRequired,
  water: PropTypes.bool,
}

// <ImageItem
//   imageUrl='http://img2.jsbn.com/venus/canmeramanHosterPro/20160321/1458535211448078720150929170217934776_1200x800.jpg'
//   linkUrl='http://www.baidu.com'
//   width={600}
//   aspectRatio='3:2'
//   quality={80}
//   processType={EmImgProcessType.emGD_HW_L}
//   water={false}
// />

export default ImageItem
